// 头部元素
let comheader_nav = document.querySelector('.com-header_nav');
let comheader_navlogo = comheader_nav.querySelector('.com-header_navlogo');

let comheader_logoout = document.querySelector('.com-header_logoout');
let comheader_logo = document.querySelector('.com-header_logo');
let comheader_logoin = document.querySelector('.com-header_logoin');

// 导航栏元素
let comnav = document.querySelector('.com-nav');
let comnav_logo = document.querySelector('.com-nav_logo');
let comnav_navlogo = document.querySelector('.com-nav_navlogo');
let comnav_ul = document.querySelector('.com-nav_nav')
let comnav_icon = document.querySelectorAll('.com-nav_icon');
let comnav_nav = document.querySelector('.com-nav_nav');

// 导航栏处登录图标
let comnav_register = document.querySelector('.com-nav_register');

let comnav_icona = comnav_nav.querySelectorAll('a');

// 登录页面元素
let indexlogin = document.querySelector('.index-login');
let login = document.querySelector('.login');
let alogin = document.querySelector('.alogin');
let aregister = document.querySelector('.aregister')

// 登录
let loginlogomove = document.querySelector('.login-logomove');
let login_log_passw = document.querySelector('#mypassword1');
// 登录按钮
let submit1 = document.querySelector('.submit1');

// 注册

// 注册密码
let mypassword21 = document.querySelector('#mypassword21');
let mypassword22 = document.querySelector('#mypassword22');

// 注册内容
let login_num = document.querySelector('.login_num');
// 注册按钮
let submit2 = document.querySelector('.submit2');


//点击头部导航图标，遮罩层出现
comheader_nav.addEventListener('click', function () {
    comnav.style.display = 'block';

    comnav.className = "com-nav com-nav_appear";
    comnav.style.animationPlayState = "running";

    comnav_navlogo.className = "com-nav_navlogo com-nav_navlogosmall";
    comnav_navlogo.style.animationPlayState = "running";

    comnav_ul.className = 'com-nav_nav com-nav_navsmall';
    comnav_ul.style.animationPlayState = "running";

    setTimeout(function () {
        comnav.style.animationPlayState = "paused";
        comnav.className = "com-nav";

        comnav_navlogo.style.animationPlayState = "paused";
        comnav_navlogo.className = "com-nav_navlogo";

        comnav_ul.style.animationPlayState = "paused";
        comnav_ul.className = 'com-nav_nav';
    }, 500);
});

// 点击导航栏以外的位置，遮罩层消失
comnav.addEventListener('click', function (e) {
    if (!comnav_ul.contains(event.target)) {
        comnav.className = "com-nav com-nav_disappear";
        comnav.style.animationPlayState = "running";

        comnav_navlogo.className = "com-nav_navlogo com-nav_navlogobig";
        comnav_navlogo.style.animationPlayState = "running";

        comnav_ul.className = 'com-nav_nav com-nav_navbig'
        comnav_ul.style.animationPlayState = "running";

        setTimeout(function () {
            comnav.style.display = 'none';

            comnav.style.animationPlayState = "paused";
            comnav.className = "com-nav";

            comnav_navlogo.className = "com-nav_navlogo";
            comnav_navlogo.style.animationPlayState = "paused";

            comnav_ul.style.animationPlayState = "paused";
            comnav_ul.className = 'com-nav_nav';
        }, 500)
    }
})

// 点击登录以外的位置，遮罩层消失
indexlogin.addEventListener('click', function (e) {
    if (!login.contains(event.target)) {
        indexlogin.style.display = 'none';
    }
})

// 点击头部logo，跳转页面
comheader_logo.addEventListener('click', function () {
    comheader_logoin.style.display = 'none';
    comheader_logoout.className = "com-header_logoout com-header_logooutbig";
    comheader_logoout.style.animationPlayState = "running";

    setTimeout(function () {
        comheader_logoout.style.animationPlayState = "paused";
        comheader_logoout.className = "com-header_logoout com-header_logooutsmall";
        comheader_logoout.style.animationPlayState = "running";

    }, 500)
    setTimeout(function () {
        window.location.href = 'index.html';

    }, 999)
    setTimeout(function () {
        comheader_logoin.style.display = 'block';
        comheader_logoout.style.animationPlayState = "paused";
        comheader_logoout.className = "com-header_logoout";
    }, 1000)
    // setTimeout(function () {
    //     comheader_logoin.style.display = 'none';
    // }, 200)
})


//鼠标经过头部logo，样式改变
comheader_logo.addEventListener('mouseover', function () {
    comheader_logoin.style.top = -120 + 'px';
});
comheader_logo.addEventListener('mouseleave', function () {
    comheader_logoin.style.top = 0 + 'px';
});

// 导航栏图标文字切换
for (let i = 0; i < comnav_icon.length; i++) {
    comnav_icon[i].addEventListener('mouseover', function () {
        comnav_icon[i].style.left = -150 + 'px';
        comnav_icona[i].style.backgroundColor = '#242424';

    })
}
for (let i = 0; i < comnav_icon.length; i++) {
    comnav_icon[i].addEventListener('mouseleave', function () {
        comnav_icon[i].style.left = 0 + 'px';
        comnav_icona[i].style.backgroundColor = '#000';
    }
    )
}

// 点击登录导航栏消失
comnav_register.addEventListener('click', function () {
    comnav.className = "com-nav com-nav_disappear";
    comnav.style.animationPlayState = "running";

    comnav_navlogo.className = "com-nav_navlogo com-nav_navlogobig";
    comnav_navlogo.style.animationPlayState = "running";

    comnav_ul.className = 'com-nav_nav com-nav_navbig'
    comnav_ul.style.animationPlayState = "running";

    setTimeout(function () {
        comnav.style.display = 'none';

        comnav.style.animationPlayState = "paused";
        comnav.className = "com-nav";

        comnav_navlogo.className = "com-nav_navlogo";
        comnav_navlogo.style.animationPlayState = "paused";

        comnav_ul.style.animationPlayState = "paused";
        comnav_ul.className = 'com-nav_nav';
    }, 500);
    setTimeout(function () {
        indexlogin.style.display = 'block';
    }, 600);
});

// 登录页面logo
login_log_passw.addEventListener('focus', function () {
    loginlogomove.style.top = -120 + 'px';
})

login_log_passw.addEventListener('blur', function () {
    loginlogomove.style.top = 0 + 'px';
})

mypassword21.addEventListener('focus', function () {
    loginlogomove.style.top = -120 + 'px';
})

mypassword21.addEventListener('blur', function () {
    loginlogomove.style.top = 0 + 'px';
})

mypassword22.addEventListener('focus', function () {
    loginlogomove.style.top = -120 + 'px';
})

mypassword22.addEventListener('blur', function () {
    loginlogomove.style.top = 0 + 'px';
});

// 账号登录
alogin.addEventListener('click', function () {
    alogin.style.color = '#fff';
    aregister.style.color = '#808080';
    login_num.style.left = 0 + 'px';
});
// 账号注册
aregister.addEventListener('click', function () {
    aregister.style.color = '#fff';
    alogin.style.color = '#808080';
    login_num.style.left = -400 + 'px';
});

// 正则判断
//手机号判断
let telCheck = function () {
    let tel = /^\d{11}$/;
    let zhanghao = document.querySelector('#mynum1');
    if (!tel.test(zhanghao.value) || zhanghao.value == '') {
        alert('账号输入错误！');
        return false;
    } else {
        return true;
    }
}

let telCheck2 = function () {
    let tel = /^\d{11}$/;
    let zhanghao = document.querySelector('#mynum2');
    if (!tel.test(zhanghao.value) || zhanghao.value == '') {
        alert('账号输入错误！');
        return false;
    } else {
        return true;
    }
}
//验证密码字段
let pwdCheck = function () {
    let reg = /^[\w]{6,12}$/;
    let mima = document.querySelector('#mypassword1');
    if (!reg.test(mima.value) || mima.value == '') {
        alert('请输入6-12位密码!');
        return false;
    } else {
        return true;
    }
}

let pwdCheck2 = function () {
    let reg = /^[\w]{6,12}$/;
    let mima = document.querySelector('#mypassword21');
    if (!reg.test(mima.value) || mima.value == '') {
        alert('请输入6-12位密码!');
        return false;
    } else {
        return true;
    }
}

//确认密码
let pwdSure = function () {
    if (mypassword21.value === mypassword22.value) {
        return true;
    }
    else {
        alert('两次密码输入不一致！');
        return false;
    }
}

// 登录按钮点击正则判断
submit1.addEventListener('click', function () {
    let num = document.querySelector('#mynum1');
    let pwd = document.querySelector('#mypassword1');
    let error1 = document.querySelector('.error1')
    let judge1 = telCheck();
    let judge2 = pwdCheck();
    if (judge1 && judge2) {
        error1.style.color = 'green';
        error1.innerHTML = '提交成功！';
        // userLogin(num, pwd);
    } else {
        error1.style.color = 'red';
        error1.innerHTML = '输入错误';
    }
})
// 注册按钮点击正则判断
submit2.addEventListener('click', function () {
    let num = document.querySelector('#mynum2');
    let pwd = document.querySelector('#mypassword21');
    let error2 = document.querySelector('.error2')
    let judge1 = telCheck2();
    let judge2 = pwdCheck2();
    let judge3 = pwdSure();
    if (judge1 && judge2 && judge3) {
        error2.style.color = 'green';
        error2.innerHTML = '提交成功！';
        // userRegister(num, pwd);
    } else {
        error2.style.color = 'red';
        error2.innerHTML = '输入错误';
    }
})

// // ajax请求
// // 创建对象
// const xhr = new XMLHttpRequest();
// // 注册接口
// function userRegister(num, pwd) {
//     xhr.open('POST', 'http://localhost:3000/auth/register');
//     xhr.setRequestHeader("Content-Type", "application/json");
//     xhr.send('username=' + num.value + '&password=' + pwd.value);
//     xhr.onreadystatechange = function () {
//         //判断
//         if (xhr.readyState === 4) {
//             if (xhr.status >= 400) {
//                 //处理服务端返回的结果
//                 tipAlert('该用户已存在!请直接登录');
//                 num.value = '';
//                 pwd.value = '';
//             }
//             if (xhr.status >= 200 && xhr.status < 300) {
//                 //处理服务端返回的结果
//                 tipAlert('注册成功!请登录');
//                 num.value = '';
//                 pwd.value = '';
//             }
//         }
//     }
// }
// // 登录接口
// function userLogin(num, pwd) {
//     xhr.open('POST', 'http://localhost:3000/auth/login');
//     xhr.setRequestHeader("Content-Type", "application/json");
//     xhr.send('username=' + num.value + '&password=' + pwd.value);
//     xhr.onreadystatechange = function () {
//         //判断
//         if (xhr.readyState === 4) {
//             if (xhr.status >= 400) {
//                 //处理服务端返回的结果
//                 tipAlert('登录成功!');
//                 num.value = '';
//                 pwd.value = '';
//             }
//             if (xhr.status >= 200 && xhr.status < 300) {
//                 //处理服务端返回的结果
//                 tipAlert('密码错误');
//                 num.value = '';
//                 pwd.value = '';
//             }
//         }
//     }
// }

// 返回顶部
let progessDom = document.querySelector('.progess');
let totop = document.querySelector('.totop');

function rotateCircle(persent) {
    var circleLength = Math.floor(2 * Math.PI * parseFloat(progessDom.getAttribute('r')));
    var value = persent * circleLength / 100;
    progessDom.setAttribute("stroke-dasharray", value + ",10000");
}
let body = document.querySelector('body');
document.addEventListener('mousewheel', function () {
    let num = (window.pageYOffset / (document.body.scrollHeight - window.innerHeight)) * 100;
    rotateCircle(num);
});

totop.addEventListener('click', function () {
    updown(document.documentElement, 0);
})

function updown(obj, target) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var speed = Math.floor((target - obj.scrollTop) / 10);
        if (obj.scrollTop == target) {
            clearInterval(obj.timer);
        }
        obj.scrollTop = obj.scrollTop + speed;
    }, 15);
}
